import BaseComponent from "../../app/baseComponent";

import { AuiInputDatepicker } from "../date/input-datepicker.component";

export class AuiInputDaterange extends BaseComponent {
    constructor(name) {
        super(name);
        this.props = {
            startDate: {
                type: Date,
                default: new Date()
            },
            endDate: {
                type: Date,
                default: new Date()
            }
        };
        this.methods = {
            setStartDate(date) {
                this.daterange.startDate = date;
            },
            setEndDate(date) {
                this.daterange.endDate = date;
            },
            onStartDateClick(e) {
                var self = this;
                var year = e.target.getAttribute("data-year");
                var month = e.target.getAttribute("data-month");
                var day = e.target.getAttribute("data-day");
                self.daterange.startDate = new Date(year, month, day); 
                self.$emit("datechange", self.daterange.startDate, self.daterange.endDate);                           
            },
            onEndDateClick(e) {
                var self = this;
                var year = e.target.getAttribute("data-year");
                var month = e.target.getAttribute("data-month");
                var day = e.target.getAttribute("data-day");
                self.daterange.endDate = new Date(year, month, day);
                self.$emit("datechange", self.daterange.startDate, self.daterange.endDate);                           
            }            
        }
    }
    _template() {
        var self = this;
return `
<div class="${self._name}"><div 
    class="${self._name}__start">
        <aui-input-datepicker 
            ref="startInput"
            v-model="startDate"
            @dateselect="onStartDateClick"
            :endDate="daterange.endDate"></aui-input-datepicker>
        </div><div 
    class="${self._name}__gutter"> </div><div 
    class="${self._name}__end">
        <aui-input-datepicker 
            v-model="endDate"        
            @dateselect="onEndDateClick"
            :startDate="daterange.startDate"></aui-input-datepicker>
    </div>
</div>
`        
    }
    _mounted() {                
        var self = this;                  
    }    
    _data() {
        var ret = {};    
        ret.daterange = {
            endDate: new Date(),
            startDate: new Date(),           
        }
        return ret;        
    }      
}

AuiInputDaterange.install = function () {
    AuiInputDatepicker.install();
    window.AUICustomComponents.define("aui-input-daterange", AuiInputDaterange);
}
